<template>
  <view class="coupon-page">
    <view class="tab-section">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">我的优惠券</view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">可领取</view>
    </view>
    <swiper class="swiper" :current="currentTab" @change="onSwiperChange">
      <swiper-item>
        <scroll-view scroll-y style="height: 100%;">
          <view class="coupon-list">
            <view class="coupon-card" v-for="(item, index) in myCoupons" :key="'mine-'+index">
              <view class="card-main">
                <view class="card-left">
                  <view class="title-row">
                    <view class="coupon-tag">{{item.typeStr}}</view>
                    <view class="coupon-title">{{item.title}}</view>
                  </view>
                  <view class="coupon-date">有效期至 {{item.expire}}</view>
                  <view class="coupon-detail" @click="toggleDetail('mine', index)" style="display: flex; align-items: center; cursor: pointer; gap: 8rpx;">
                    详细信息
                    <text :style="{display:'inline-block', transform: showDetailMine[index] ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s'}">▼</text>
                  </view>
                </view>
                <view class="card-right" :class="item.status">
                  <view class="corner-badge">{{ statusText(item.status) }}</view>
                  <view class="amount-section">
                    <text class="amount-symbol" v-if="item.type != 3">¥</text>
                    <text class="amount-value">{{item.discount}}</text>
                    <text class="amount-value" v-if="item.type == 3">折</text>
                  </view>
                  <view class="amount-condition" v-if="item.type==1">满{{item.basePrice}}元可用</view>
                </view>
              </view>
              <view v-if="showDetailMine[index]" class="coupon-extra-detail">
                <view>限品类：{{item.detail.type}}</view>
                <view>限平台：{{item.detail.platform}}</view>
                <view>券编号：{{item.detail.code}}</view>
                <view>{{item.detail.note}}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100%;">
          <view class="coupon-list">
            <view class="coupon-card" v-for="(item, index) in avaiableTemplates" :key="'avai-'+index">
              <view class="card-main">
                <view class="card-left">
                  <view class="title-row">
                    <view class="coupon-tag">{{item.typeStr}}</view>
                    <view class="coupon-title">{{item.title}}</view>
                  </view>
                  <view class="coupon-date">有效期至 {{item.expire}}</view>
                  <view class="coupon-detail" @click="toggleDetail('avai', index)" style="display: flex; align-items: center; cursor: pointer; gap: 8rpx;">
                    详细信息
                    <text :style="{display:'inline-block', transform: showDetailAvai[index] ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s'}">▼</text>
                  </view>
                </view>
                <view class="card-right" :class="item.status">
                  <view class="corner-badge">新到</view>
                  <view class="amount-section">
                    <text class="amount-symbol" v-if="item.type != 3">¥</text>
                    <text class="amount-value">{{item.discount}}</text>
                    <text class="amount-value" v-if="item.type == 3">折</text>
                  </view>
                  <view class="amount-condition" v-if="item.type==1">满{{item.basePrice}}元可用</view>
                  <button class="use-btn" @tap="distributeCoupon(item.id)">去领取</button>
                </view>
              </view>
              <view v-if="showDetailAvai[index]" class="coupon-extra-detail">
                <view>限品类：{{item.detail.type}}</view>
                <view>限平台：{{item.detail.platform}}</view>
                <view>券编号：{{item.detail.code}}</view>
                <view>{{item.detail.note}}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import api from '@/utils/api'
export default {
  data() {
    return {
      currentTab: 0,
      myCoupons: [],
      avaiableTemplates: [],
      showDetailMine: [],
      showDetailAvai: []
    }
  },
  onShow() {
    this.loadMine()
    this.loadAvaiable()
  },
  methods: {
    switchTab(i) {
      this.currentTab = i
    },
    onSwiperChange(e) {
      this.currentTab = e.detail.current || 0
    },
    loadMine() {
      api.mineCoupons().then(res => {
        this.myCoupons = Array.isArray(res.data) ? res.data : []
        this.showDetailMine = new Array(this.myCoupons.length).fill(false)
      })
    },
    loadAvaiable() {
      api.avaiableTemplate().then(res => {
        this.avaiableTemplates = Array.isArray(res.data) ? res.data : []
        this.showDetailAvai = new Array(this.avaiableTemplates.length).fill(false)
      })
    },
    toggleDetail(type, index) {
      if (type === 'mine') {
        this.$set(this.showDetailMine, index, !this.showDetailMine[index])
      } else {
        this.$set(this.showDetailAvai, index, !this.showDetailAvai[index])
      }
    },
    distributeCoupon(id) {
      api.distributeCoupon({ templateId: id }).then(() => {
        uni.showToast({ title: '领取成功', icon: 'none' })
        this.loadAvaiable()
        this.loadMine()
      })
    },
    statusText(status) {
      if (status === 'used') return '已用'
      if (status === 'expired') return '过期'
      return '生效中'
    }
  }
}
</script>

<style lang="scss" scoped>
$c-bg: #f7f8fa;
$c-blue: #4d8afd;
$c-blue-grad: linear-gradient(135deg, #6db4ff 0%, #377dff 100%);
$c-orange-grad: linear-gradient(135deg, #ffb86c 0%, #ff7b2c 100%);
$c-gray: #b3b3b3;
$c-btn-blue: #377dff;
$c-btn-gray: #e5e5e5;
$c-btn-gray-text: #b3b3b3;

.coupon-page {
  min-height: 100vh;
  background: $c-bg;
  padding: 24rpx 0;
}

.tab-section {
  display: flex;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  margin: 0 16rpx 20rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
  padding: 16rpx 0;
}
.tab-item.active {
  color: #ff4d4f;
  font-weight: bold;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff4d4f;
  border-radius: 2rpx;
}

.swiper { height: calc(100vh - 180rpx); }

.coupon-list { display: flex; flex-direction: column; gap: 20rpx; padding: 0 16rpx; }
.coupon-card { display: flex; flex-direction: column; border-radius: 20rpx; background: #fff; overflow: hidden; position: relative; min-height: 120rpx; }
.card-main { display: flex; flex-direction: row; position: relative; z-index: 2; }
.card-left { flex: 1; padding: 28rpx 18rpx 28rpx 28rpx; display: flex; flex-direction: column; justify-content: center; }
.card-left .title-row { display: flex; align-items: center; margin-bottom: 50rpx; }
.card-left .coupon-tag { width: auto; display: inline-block; background: $c-blue; color: #fff; font-size: 16rpx; border-radius: 16rpx; padding: 2rpx 14rpx; margin-right: 10rpx; }
.card-left .coupon-title { font-size: 20rpx; font-weight: bold; color: #222; display: flex; align-items: center; }
.card-left .coupon-date { font-size: 20rpx; color: #222; margin-bottom: 6rpx; }
.card-left .coupon-detail { font-size: 18rpx; color: $c-gray; display: flex; justify-content: space-between; }

.card-right { width: 190rpx; background: $c-blue-grad; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 20rpx; border-bottom-right-radius: 20rpx; padding: 18rpx 0; z-index: 2; }
.card-right.used, .card-right.expired { background: linear-gradient(135deg, #e5e5e5 0%, #b3b3b3 100%); }
.card-right.used .amount-section .amount-symbol, .card-right.used .amount-section .amount-value, .card-right.expired .amount-section .amount-symbol, .card-right.expired .amount-section .amount-value { color: #666; }
.card-right.used .amount-condition, .card-right.expired .amount-condition { color: #666; }
.card-right::before, .card-right::after { content: ''; position: absolute; left: -10rpx; width: 20rpx; height: 20rpx; background: $c-bg; border-radius: 50%; z-index: 2; }
.card-right::before { top: 0; transform: translateY(-50%); }
.card-right::after { bottom: 0; transform: translateY(50%); }
.corner-badge { position: absolute; top: 0; right: 0; background: $c-orange-grad; color: #fff; font-size: 16rpx; padding: 2rpx 12rpx; border-top-right-radius: 16rpx; border-bottom-left-radius: 16rpx; z-index: 3; }
.amount-section { display: flex; align-items: flex-end; margin-bottom: 8rpx; margin-top: 10rpx; }
.amount-section .amount-symbol { font-size: 22rpx; color: #fff; font-weight: bold; margin-right: 2rpx; }
.amount-section .amount-value { font-size: 40rpx; color: #fff; font-weight: bold; line-height: 1; }
.amount-condition { font-size: 18rpx; color: #e6f0ff; margin-bottom: 14rpx; }
.use-btn { width: 150rpx; height: 32rpx; line-height: 32rpx; background: #fff; color: $c-btn-blue; border: none; border-radius: 16rpx; font-size: 18rpx; font-weight: bold; text-align: center; margin-top: 4rpx; box-shadow: 0 1rpx 4rpx 0 rgba(55,125,255,0.08); }
.use-btn.used, .use-btn.expired { background: $c-btn-gray; color: $c-btn-gray-text; }

.coupon-extra-detail { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.01); border-bottom-left-radius: 20rpx; padding: 20rpx 28rpx; color: #888; font-size: 16rpx; animation: fadeIn 0.2s; position: relative; z-index: 1; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10rpx); } to { opacity: 1; transform: translateY(0); } }
</style>


